<template>
  <view class="custom-tabbar">
    <!-- 左侧导航项 -->
    <view 
      class="tab-item" 
      :class="{ active: currentIndex === 0 }"
      @click="switchTab(0)"
    >
      <image 
        class="tab-icon" 
        :src="currentIndex === 0 ? '/static/images/home/tab_home_selected.svg' : '/static/images/home/tab_home.svg'"
      />
      <text class="tab-text" :class="{ active: currentIndex === 0 }">首页</text>
    </view>
    
    <!-- 中间圆形按钮 -->
    <view class="center-button" @click="handleCenterClick">
      <view class="center-circle">
        <text class="center-text">扫一扫</text>
      </view>
    </view>
    
    <!-- 右侧导航项 -->
    <view 
      class="tab-item" 
      :class="{ active: currentIndex === 2 }"
      @click="switchTab(2)"
    >
      <image 
        class="tab-icon" 
        :src="currentIndex === 2 ? '/static/images/home/tab_my_selected.svg' : '/static/images/home/tab_my.svg'"
      />
      <text class="tab-text" :class="{ active: currentIndex === 2 }">我的</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomTabbar',
  props: {
    current: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  watch: {
    current: {
      handler(newVal) {
        this.currentIndex = newVal
      },
      immediate: true
    }
  },
  methods: {
    switchTab(index) {
      console.log("switchTab",index,this.currentIndex)
      // 页面跳转
      const pages = [
        '/pages/index/index',
        '',
        '/pages/me/me'
      ]
      
      if (pages[index] && pages[index] !== '') {
          uni.navigateTo({
            url: pages[index]
          })
          return

        // uni.switchTab({
        //   url: pages[index],
        //   success: () => {
        //     // 页面跳转成功后触发change事件，让父组件更新current
        //     this.$emit('change', index)
        //     console.log("switchTab",index,this.currentIndex)
        //   }
        // })
      }
    },
    
    handleCenterClick() {
      // 处理中间按钮点击事件，可以打开扫码页面或其他功能
      this.$emit('centerClick')
      
      // 示例：跳转到扫码页面
      uni.navigateTo({
        url: '/pages/scan/scan'
      })
    },
    
    // 设置当前选中的tab索引
    setCurrentIndex(index) {
      if (index >= 0 && index < 3) {
        this.$emit('change', index)
        console.log("setCurrentIndex",index,this.currentIndex)
      }
    }
  }
}
</script>

<style scoped>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140rpx;
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  /*padding-bottom: env(safe-area-inset-bottom);*/
  z-index: 900;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15rpx 0 20rpx 0;
  transition: all 0.3s ease;
}

.tab-icon {
  width: 64rpx;
  height: 64rpx;
  margin-bottom: 8rpx;
  transition: transform 0.3s ease;
}

.tab-item.active .tab-icon {
  transform: scale(1.1);
}

.tab-text {
  font-size: 26rpx;
  color: #666666;
  transition: all 0.3s ease;
  font-weight: 400;
}

.tab-text.active {
  /*color: #2DCC72;*/
  font-weight: 600;
  font-size: 30rpx;
}

.center-button {
  position: relative;
  width: 150rpx;
  height: 150rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  /*margin-bottom: 10rpx;*/
}

.center-circle {
  width: 150rpx;
  height: 150rpx;
  background: linear-gradient(135deg, #10C2A9 0%, #1CCCB4 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /*box-shadow: 0 6rpx 20rpx rgba(45, 204, 114, 0.4);*/
  transform: translateY(-10rpx);
  /*border: 6rpx solid #ffffff;*/
  transition: all 0.3s ease;
  position: relative;
}

.center-circle:active {
  transform: translateY(-20rpx) scale(0.95);
  box-shadow: 0 4rpx 15rpx rgba(45, 204, 114, 0.3);
}

.center-circle::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
  top: 0;
  left: 0;
}

.center-text {
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
  z-index: 1;
}

/* 适配不同设备的安全区域 */
@supports (bottom: env(safe-area-inset-bottom)) {
  .custom-tabbar {
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  }
}


</style>